<template>
	<view class="body">
		<view class="top">
			<view class="title">账户余额（元）</view>
			<view class="disC">
				<view class="fz40">
					￥ {{amount}}
				</view>
				<view class="" @click="Withdrawal()">
					提现
				</view>
			</view>
			<view class="disF">
				<view class="">
					累计提现：
				</view>
				<view class="p">
					{{withdraw}}
				</view>
			</view>
		</view>
		<view class="center">
			<picker mode="date" :value="date" fields='month' :start="startDate" :end="endDate" @change="bindDateChange">
				<view class="select_time">{{date}}
					<image src="../../static/icon/icon_01.png" alt="收起" class=" down" />
				</view>
			</picker>
			<view class="gy">
				当月累计返款： {{list.refund}} 元
			</view>
		</view>
		<view class="bottom">
			<view class="tips">
				<span class="bt"></span>钱包明细
			</view>
			<scroll-view scroll-y="true" class="lis">
				<view v-for="(item,index) in list.wallets" :key="index" class="li" @click="goDetail(item.sourceDesc)">
					<view class="li_top">
						<view class="left">
							<view class="time">
								{{item.createTime}}
							</view>
							<view class="income">
								{{item.type == 1 ? '+' : item.type == 2 ? '-' : ''}}{{item.amount}}
							</view>
						</view>

						<view class="right">
							余额：{{item.balance}}
						</view>
					</view>
					<view class="li_bottom">
						<view class="">
							{{item.remark}}，
						</view>
						<view class="">
							订单号:{{item.orderId}}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		memberBalance,
		walletFlow
	} from '@/api.js'
	export default {

		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				date: currentDate,
				amount: '',
				withdraw: '',
				list: {}
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad() {
			this.init()
		},
		mounted() {
			let that = this
			uni.$on('update', function(data) {
				that.init()
			})
		},
		onUnload() {
			uni.$off('update');
			uni.$emit('refreshIfNeeded', false)
		},
		methods: {
			goDetail(id) {
				uni.navigateTo({
					url: '/pages/orderDetail/orderDetail?id=' + id
				})
			},
			Withdrawal() {
				uni.navigateTo({
					url: '/pages/Withdrawal/Withdrawal'
				})
			},
			init() {
				this.getTop()
				this.getList()
			},
			async getTop() {
				const res = await memberBalance({});
				this.withdraw = res.result.withdraw
				this.amount = res.result.amount
			},
			async getList() {
				const res = await walletFlow({
					time: this.date
				});
				this.list = res.result
			},
			bindDateChange: function(e) {
				this.date = e.detail.value
				this.getList()
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;

				if (type === 'start') {
					year = year - 5;
				} else if (type === 'end') {
					year = year;
				}
				month = month > 9 ? month : '0' + month;
				return `${year}-${month}`;
			}
		}
	}
</script>

<style scoped lang="scss">
	.body {
		background: #f9f9f9;
		width: 100vw;
		height: 100vh;
		padding: 20rpx;
		box-sizing: border-box;

		.top {
			background-color: #6594ec;
			padding: 40rpx;
			box-sizing: border-box;
			color: #fff;
			border-radius: 20rpx;

			.title {
				font-size: 26rpx;
			}

			.disC {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 20rpx 0;
			}

			.disF {
				display: flex;
				font-size: 26rpx;

				.p {
					color: #e8a732;

				}
			}

			.fz40 {
				font-size: 40rpx;
			}
		}

		.center {
			margin: 20rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.select_time {
				padding: 8rpx 40rpx;
				border: 1rpx solid #6594ec;
				border-radius: 10rpx;
				color: #6594ec;
				display: flex;
				align-items: center;

				.down {
					margin-left: 20rpx;
					width: 30rpx;
					height: 30rpx;
					transform: rotate(90deg);

				}

			}

			.gy {
				color: #999;
				font-size: 32rpx;
			}


		}

		.bottom {
			width: 710rpx;
			margin: 0 auto;
			background: #fff;
			border-radius: 20rpx;
			padding: 30rpx 20rpx;
			box-sizing: border-box;

			.tips {
				display: flex;
				align-items: center;

				.bt {
					display: block;
					width: 4rpx;
					height: 50rpx;
					background: #6594ec;
					margin-right: 10rpx;
				}
			}

			.lis {
				padding: 0 10rpx;
				box-sizing: border-box;
				height: calc(100vh - 320rpx - 160rpx);

				/deep/ ::-webkit-scrollbar {
					display: block;
					width: 0 !important;
					height: 0 !important;
					-webkit-appearance: auto !important;
					background: transparent;
					overflow: auto !important;
				}

				.li {
					margin: 20rpx 0;


					&_top {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.left {
							margin-left: 20rpx;
							display: flex;
							align-items: center;

							.time {
								font-size: 24rpx;
								color: #999;
							}

							.income {
								font-size: 28rpx;
								color: #e8a732;
								margin-left: 20rpx;
							}
						}

						.right {
							font-size: 28rpx;
						}
					}

					&_bottom {
						margin-top: 20rpx;
						display: flex;
						align-items: center;
						background: #F2F2F2;
						color: #828282;
						padding: 20rpx;
						box-sizing: border-box;
						border-radius: 10rpx;
						font-size: 28rpx;
					}
				}
			}
		}
	}
</style>